<template>
  <view class="CoursePage">
    <view
      v-for="item in recordList"
      :key="item.id"
      @click="listItemClickHandler(item)"
      class="record-item"
      :class="{
        reduce:item.scoreType==1,
         plus:item.scoreType==0,
      }"
    >
      <view>
        <view class="title">
          <text> {{ item.name }}</text></view
        >
        <view class="extra-text"
          ><text> {{ item.classTime }}</text></view
        >
      </view>
      <view>
        <text> </text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { getRecordByStuIdAndCourseId } from "@/api/studentApi";
import { onLoad } from "@dcloudio/uni-app";

const recordList = ref([]);
const prop = defineProps(["id"]);
const form = ref(null);
const getRecordListData = () => {
  getRecordByStuIdAndCourseId({ courseId: prop.id }).then((res) => {
    if (Array.isArray(res.data)) {
      recordList.value = res.data;
    }
  });
};

const listItemClickHandler = (record) => {
  uni.navigateTo({
    url: `/pages/RecordDetailPage/RecordDetailPage?rId=${record.id}`,
  });
};
onLoad(() => {
  getRecordListData();
});
</script>

<style lang="scss" scoped>


.top-wrap {
  display: flex;
  width: 100%;
  height: 80rpx;
  justify-content: space-between;
  align-items: center;
}
$list-height:100rpx;
$list-padding:10rpx;
$list-line-height: calc(($list-height - $list-padding*2 )/2);
.record-item {
  width: 710rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: $list-padding 20rpx;
  border:2px solid $uni-border-color ;
  height: $list-height;
  margin: 20rpx;
  border-radius: 30rpx;
  
  .title {
    height: $list-line-height;
    line-height: $list-line-height;
    font-size: $uni-font-size-base;
    color: #3b4144;
    overflow: hidden;
  }
  .extra-text {
    line-height: $list-line-height;
       height: $list-line-height;
    color: $uni-text-color-grey;
    font-size: $uni-font-size-sm;
  }
}
.reduce{
      border-color:rgb(243, 38, 1) ;
      background-color: rgba(243, 38, 1,.1);
  }
  .plus{
        border-color:rgb(0, 255, 42) ;
         background-color: rgba(0, 255, 42,.1);
  }
</style>
